<template>
    <div>
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a :class="['mui-control-item', item.id==0?'mui-active':'']" 
                    v-for="item in photolist" :key="item.id" @click="reload(item.id)">
            							{{item.title}}
            			</a>
                </div>
            </div>
            <ul>
                <li v-for="item in photocontent" :key="item.id" @click="goPhoto(item.id)">
                     <img v-lazy="imgBaseUrl+item.img_url">
                    <div class="info">
                        <h4>{{item.title}}</h4>
                        <p>{{item.zhaiyao}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import mui from '../../lib/mui/js/mui.min.js'
    import config from '../../js/globalConfig'
    export default {
        data() {
            return {
                photolist: [],
                photoid: 0,
                photocontent: [],
                imgBaseUrl: config.imgBaseURL,
            }
        },
        mounted() {
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },
        created() {
            this.getPhotoCategray();
            this.getPhotoList()
        },
        methods: {
            getPhotoCategray() {
                this.$http.get('api/getimgcategory').then(res => {
                    if (res.body.status == 0) {
                        this.photolist = res.body.message
                        this.photolist.unshift({
                            title: "全部",
                            id: 0
                        })
                    } else {
                        console.log('获取商品列表失败')
                    }
                })
            },
            getPhotoList() {
                this.$http.get('api/getimages/' + this.photoid).then(res => {
                    if (res.body.status == 0) {
                        this.photocontent = res.body.message
                    } else {
                        console.log("获取图片失败")
                    }
                })
            },
            reload(id){
                this.photoid=id;
                this.getPhotoList()

            },
            goPhoto(id){
                this.$router.push('/home/photoinfo/'+id)

            }
        }
    }
</script>
<style lang="scss" scoped>
    * {
        touch-action: none;
    }
    img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: 0 auto;
    }
    ul {
        padding: 0 10px;
        margin: 0;
        li {
            position: relative;
            margin-bottom: 10px;
            img {
                display: block;
                width: 100%;
            }
            .info {
                position: absolute;
                bottom: 0;
                max-height: 84px;
                overflow: hidden;
                h4 {
                    font-size: 13px;
                    color: #fff;
                }
                p {
                    font-size: 12px;
                    color: #fff;
                }
            }
        }
    }
    li {
        list-style: none;
    }
</style>
